<template>
  <scale-box>
    <div
      style="margin: -20px 0"
      class="chart-wrap"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <header class="chart-top">
        <div class="chart-item">
          <div class="item-header">
            <span>机构总数</span>
            <span>{{ orgScreenTotal }}</span>
          </div>
          <div class="item-content">
            <!-- 组件 -->
            <barEChart :barData="barData"></barEChart>
          </div>
        </div>
        <div class="chart-item">
          <div class="item-header">
            <span>编制总数</span>
            <span>{{ organScreenTotal }}</span>
          </div>
          <div class="item-content" v-show="pieFlag">
            <PieEChart :pieData="organScreen"></PieEChart>
          </div>
        </div>
        <div class="chart-item">
          <div class="item-header">
            <span>人员总数</span>
            <span>{{ personScreenTotal }}</span>
          </div>
          <div class="item-content" v-show="pieFlag">
            <PieEChart :pieData="personScreen"></PieEChart>
          </div>
        </div>
        <div class="chart-item">
          <div class="item-header">
            <span>超空编数</span>
            <span>{{ overEmptyTotal }}</span>
          </div>
          <div class="item-content" v-show="pieFlag">
            <PieEChart :pieData="overEmptyScreen" :overEmpty="true"></PieEChart>
          </div>
        </div>
      </header>
      <footer class="chart-bottom">
        <div class="chart-item">
          <x-bar-echart :xbarData="xbarData"></x-bar-echart>
        </div>
        <div class="chart-item">
          <div class="item-header">
            <span>近期拟调方案</span>
            <span @click="toPlan"> 更多 </span>
          </div>
          <div class="item-content">
            <dv-scroll-board :config="config" />
          </div>
        </div>
      </footer>
    </div>
  </scale-box>
</template>

<script>
import ScaleBox from "./scaleBox"; // 浏览器放大缩小 主体缩放组件
import BarEChart from "./components/BarEChart";
import PieEChart from "./components/PieEChart";
import XBarEchart from "./components/XBarEchart";
import { getScreen } from "@/api/largescreen/index.js";
export default {
  name: "largeScreen",
  components: {
    ScaleBox,
    BarEChart,
    XBarEchart,
    PieEChart,
  },
  data() {
    return {
      pieFlag: false,
      loading: false,
      barData: "", //机构
      organScreen: [], // 编制
      personScreen: [], // 人员
      overEmptyScreen: [], //超控
      orgScreenTotal: "", // 机构总数
      organScreenTotal: "", // 编制总数
      personScreenTotal: "", // 人员总数
      overEmptyTotal: "", // 超控总数
      xbarData: [], // 轮播  XXXX局
      config: {}, //拟调方案,
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata() {
      this.loading = true;
      getScreen().then((res) => {
        const { data } = res;
        this.barData = {
          // 机构
          xData: data.orgScreen.orgScreenName,
          yData: data.orgScreen.orgScreenValue,
        };
        this.orgScreenTotal = data.orgScreen.orgScreenTotal;
        this.organScreen = data.organScreen.organScreenList.map((e) => {
          // 编制
          return {
            name: e.name,
            value: e.value,
          };
        });
        this.organScreenTotal = data.organScreen.organScreenTotal;
        this.personScreen = data.personScreen.personScreenList.map((e) => {
          // 人员
          return {
            name: e.name,
            value: e.value,
          };
        });
        this.personScreenTotal = data.personScreen.personScreenTotal;
        this.overEmptyScreen = data.overEmptyScreen.overEmptyScreenList.map(
          (e) => {
            // 超控
            return {
              name: e.name,
              value: e.value,
            };
          }
        );
        this.overEmptyTotal = data.overEmptyScreen.overEmptyTotal;
        this.xbarData = data.orgDetailList.map((e) => {
          return {
            name: e.orgName,
            data: e.organDetailList.map((data) => {
              //XXX局
              return {
                key: data.organType,
                value: data.real,
                presets: data.presets,
              };
            }),
          };
        });
        // 拟调方案
        this.config = {
          header: ["方案编号", "方案名称", "状态"],
          data: data.planList.map((e) => {
            return [
              e.planCode,
              e.planName,
              e.status == 1 ? "已生效" : "未生效",
            ];
          }),
          headerHeight: 30,
          headerBGC: "rgba(29,39,75,0)", //表头
          oddRowBGC: "rgba(29,39,75,0)", //奇数行
          evenRowBGC: "rgba(29,39,75,0)", //偶数行
          columnWidth: [300], //列宽度
          // rowNum: 7, //表行数
          align: ["left"],
          // waitTime:20000
        };
        this.loading = false;
        this.pieFlag = true;
      });
    },
    toPlan() {
      this.$router.push({
        path: "/plans",
        query: {},
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.chart-wrap {
  width: 100%;
  height: calc(100vh - 40px);
  background: url("../../assets/images/screen.jpg") center no-repeat;
  background-size: 100% 100%;

  .chart-top {
    width: 100%;
    margin-top: 35px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .chart-item {
      width: 350px;
      height: 280px;
      border: 3px solid #144d8f;
      background: rgba(20, 77, 143, 0.2);
      display: flex;
      flex-direction: column;

      .item-header {
        /*margin: 5px 0 0 10px;*/
        display: flex;
        justify-content: space-between;
        padding: 10px 10px;
        /*border-left: 3px solid #00e2ff;*/
        span {
           /*padding-bottom: 5px;*/
          font-size: 30px;
          color: #fff;
          font-weight: 700;
        }

        span:first-child {
          font-weight: 400;
          font-size: 20px;
          border-bottom: 2px solid #f5f5f5;
          padding-bottom: 7px;
        }
      }

      .item-content {
        flex: 1;
      }
    }
  }

  .chart-bottom {
    width: 100%;
    margin: 15px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .chart-item {
      width: 721px;
      height: 320px;
      border: 4px solid #144d8f;
      background: rgba(30, 40, 76, 0.5);

      &:nth-child(2) {
        display: flex;
        flex-direction: column;
      }

      .item-header {
        /*margin: 5px 0 0 10px;*/
        display: flex;
        justify-content: space-between;
        padding: 10px 10px;

        span {
          padding-bottom: 5px;
          font-size: 14px;
          color: #fff;
        }

        span:first-child {
          // border-bottom: 2px solid #2481AD;
          font-size: 20px;
        }
      }

      .item-content {
        flex: 1;
        padding: 0 10px 20px 10px;

        &::v-deep .dv-scroll-board {
          height: 100%;

          .header,
          .row-item {
            border-bottom: 1px solid #157db6;
          }

          .row-item:first-child {
            margin-top: -1px;
          }
        }
      }
    }
  }
}
</style>
